<template>
  <div class="config-wrapper">
    <div class="form-search">
      <el-form size="mini" :inline="true" :model="queryParams">
        <el-form-item label="指标名称">
          <el-input
            v-model="queryParams.quotaName"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="行业">
          <el-select v-model="queryParams.industryKey" placeholder="请选择">
            <el-option
              v-for="item in industryOptions"
              :key="item.value"
              :value="item.label"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="预警要求">
          <el-select
            v-model="queryParams.isWarning"
            placeholder="请选择"
            clearable
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-container>
      <el-aside width="200px">
        <el-tree
          v-loading="loading.tree"
          class="quota-tree"
          ref="tree"
          :data="moduleTree"
          @current-change="handleTreeCurrentChange"
          node-key="id"
          :props="treeProps"
        >
        </el-tree>
      </el-aside>
      <el-main>
        <div class="table-container">
          <div class="table-top">
            <div class="left">
              <div class="top-line"></div>
              预警配置列表
            </div>
            <div class="right"></div>
          </div>
          <el-table
            v-loading="loading.table"
            stripe
            ref="table"
            :data="tableData"
          >
            <el-table-column prop="keyName" label="行业"> </el-table-column>
            <el-table-column prop="firModuleName" label="一级模块">
            </el-table-column>
            <el-table-column prop="secModuleName" label="二级模块">
            </el-table-column>
            <el-table-column prop="quotaName" label="指标名称">
            </el-table-column>
            <el-table-column prop="isWarning" width="100" label="预警要求">
              <template slot-scope="{ row }">
                {{ row.isWarning === "1" ? "是" : "否" }}
              </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="修改时间">
            </el-table-column>
            <el-table-column label="操作" width="80px">
              <template slot-scope="{ row }">
                <div class="table-operation">
                  <el-link type="primary" @click="showOptionList(row)"
                    >配置</el-link
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="pagination.total > 10" class="table-pagination">
            <el-pagination
              v-bind="pagination"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
      </el-main>
    </el-container>
    <ConfigOptionList
      :visible="optionListVisible"
      :relation-id="currentRecord.relationId"
      :field="currentRecord.quotaName"
      @close="optionListVisible = false"
    />
  </div>
</template>

<script>
import ConfigOptionList from "./config-option-list";
export default {
  components: { ConfigOptionList },
  data() {
    return {
      moduleTree: [],
      selectedName: [],
      treeProps: {
        children: "children",
        label: "name",
      },
      queryParams: {
        quotaName: "",
        industryKey: "",
        isWarning: "",
      },
      tableData: [],
      pagination: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      optionListVisible: false,
      currentRecord: {},
      loading: {
        tree: false,
        table: false,
      },
    };
  },
  computed: {
    industryOptions() {
      return this.moduleTree.reduce((ret, cur) => {
        ret = ret.concat(
          cur.children.map((c) => ({ label: c.name, value: c.key }))
        );
        return ret;
      }, []);
    },
  },
  mounted() {
    this.fetchTreeData();
    this.fetchTableData();
    this.$eventBus.$on('refresh', (e) => {
    this.fetchTableData();

    })
  },
  methods: {
    fetchTableData() {
      const params = {
        ...this.queryParams,
        pageNum: this.pagination.pageNo,
        pageSize: this.pagination.pageSize,
        division: this.selectedName,
      };
      this.loading.table = true;
      this.$http
        .get("/sys/warning/getList", { params })
        .then((res) => {
          this.tableData = res.data.list || [];
          this.pagination.total = Number(res.data.total);
        })
        .finally(() => {
          this.loading.table = false;
        });
    },
    handleSizeChange(size) {
      this.pagination.pageNo = 1;
      this.pagination.pageSize = size;
      this.fetchTableData();
    },
    handleCurrentChange(no) {
      this.pagination.pageNo = no;
      this.fetchTableData();
    },
    showOptionList(row) {
      this.currentRecord = row;
      this.optionListVisible = true;
    },
    onSearch() {
      this.fetchTreeData();
      this.pagination.pageNo = 1;
      this.selectedName = null;
      this.queryParams.type = null;
      this.fetchTableData();
    },
    onReset() {
      // this.$data.queryParams = this.$options.data().queryParams
      // this.onSearch()
      Object.assign(this.$data, this.$options.data.bind(this)());
      this.fetchTreeData();
      this.fetchTableData();
    },
    handleTreeCurrentChange(data) {
      console.log("current-change ", data, this.moduleTree);
      if (data.grade === 1) {
        this.selectedName = data.name;
        this.queryParams.industryKey = null;
        this.queryParams.type = null;
      }
      if (data.grade === 2) {
        this.queryParams.industryKey = data.name;
        this.queryParams.type = null;
      }
      if (data.grade === 3) {
        this.queryParams.industryKey = data.father;
        switch (data.name) {
          case "基础信息":
            this.queryParams.type = 0;
            break;
          case "运行信息":
            this.queryParams.type = 1;
            break;
          case "管理信息":
            this.queryParams.type = 2;
            break;
          case "服务信息":
            this.queryParams.type = 3;
            break;
          case "安全信息":
            this.queryParams.type = 4;
            break;
        }
      }
      // 获取表格数据
      this.fetchTableData();
    },
    fetchTreeData() {
      this.loading.tree = true;
      this.$http
        .get("/cgjybzIndustry/getModuleInfo")
        .then((resp) => {
          const { data } = resp.data;
          const tree = data.reduce((ret, cur) => {
            if (ret.findIndex((d) => d.name === cur.division) < 0) {
              const children = data
                .filter((d) => {
                  return d.division === cur.division;
                })
                .reduce((ret1, cur1) => {
                  if (
                    ret1.findIndex(
                      (dd) => dd.industryName === cur1.industryName
                    ) < 0
                  ) {
                    ret1.push({
                      name: cur1.industryName,
                      ...cur1,
                    });
                  }
                  return ret1;
                }, []);

              children.forEach((c) => {
                const grandson = data
                  .filter((d) => {
                    return c.industryName === d.industryName;
                  })
                  .reduce((rm, rcur) => {
                    if (
                      rm.findIndex(
                        (r) => r.industryType === rcur.industryType
                      ) < 0
                    ) {
                      rm.push({
                        name: rcur.industryType,
                        ...rcur,
                        isLeaf: true,
                      });
                    }
                    return rm;
                  }, []);
                c.children = grandson;
              });

              ret.push({
                name: cur.division,
                ...cur,
                children,
              });
            }
            return ret;
          }, []);
          this.moduleTree = tree.filter((item) => item.name);
          this.moduleTree.map((m) => {
            let index = 1;
            m.grade = index;
            if ("children" in m) {
              this.addGrade(m.children, index, m.name);
            }
          });
        })
        .finally(() => {
          this.loading.tree = false;
        });
    },
    addGrade(m, index, name) {
      m.map((ev) => {
        ev.grade = index + 1;
        if ("children" in ev) {
          this.addGrade(ev.children, index + 1, ev.name);
        } else {
          ev.father = name;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.config-wrapper {
  background-color: white;
  .el-container {
    height: calc(100vh - 160px);
    .el-aside {
      // border-right: 1px dashed #dddddd;
    }
    .el-main {
      padding-top: 0;
    }
  }
  ::v-deep .quota-tree {
    width: 100%;
    padding: 0 20px 20px;
    .el-tree {
      color: #212121;
    }
    .el-tree-node__content {
      height: 32px;
    }
    .el-tree-node.is-current > .el-tree-node__content {
      background: #3d76cc;
      color: white;
    }
  }
  .form-search {
    padding: 20px 20px 0;
  }
  .table-container {
    .table-header {
      margin-bottom: 10px;
      text-align: right;
    }
    .table-operation {
      > * {
        margin-right: 16px;
      }
    }
  }
}
</style>
